<template>
	<view class="content ">
        
        <view class="plr15 ptb15">
                <view class="justify-start topTab mb10">
                    <view @click="changeTopCurrent(1)"  :class="topCurrent==1?'topActive':''">活动预约 </view>
                    <view @click="changeTopCurrent(0)" :class="topCurrent==0?'topActive':''">场馆预约 </view>
                    
                    <!-- <view class="">社会场馆预约 </view> -->
                </view>
                <view class="" v-if="topCurrent==1">
                    <uv-scroll-list>
                    		<view v-for="(item, index) in cateList" :class="[ 'cateItem',  index==current?'active': '']" :key="index" @click="change(index)">
                    			{{item.title}}
                    		</view>
                    </uv-scroll-list>
                </view>
                <view class="bgWhite radius6 plr15 ptb15 ">
                        <block v-if="topCurrent==0">
                            <view class="artItem  justify-between align-center" v-for="(i,n) in list" :key="n"  @click="toDetail(i)">
                                <image :src="$domain.api+i.img_url" mode=""></image>
                                <view class="flex-col justify-between  flex1">
                                    <text class="name">{{i.name}}</text>
                                    <view class="justify-between "> <view class="clamp2 flex1">
                                        {{i.content}}
                                    </view>     <image @click.stop="call" style="width: 32rpx;margin: 0;" src="/static/images/call.png" mode="widthFix"></image> </view>
                                    <view class="right plr15 " style="width: 180rpx;" >
                                        立即预约
                                    </view>
                                </view>
                            </view>
                            <view class="" v-if="list.length==0">
                                <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
                            </view>
                        </block>
                        <block v-if="topCurrent==1">
                            <view class="artItem  justify-between align-center" v-for="(i,n) in list" :key="n" @click="toDetails(i)">
                                <image :src="$domain.api+i.img_url" mode=""></image>
                                <view class="flex-col justify-between  flex1">
                                    <text class="name">{{i.title}}</text>
                                    <view class="item-price" v-if="Number(i.pay_fee)>0">
                                       ￥<text>{{i.pay_fee}}</text>元/起
                                    </view>
                                    <view class="item-price" v-else>
                                       免费
                                    </view>
                                    <view class="right " >
                                        预约
                                    </view>
                                </view>
                            </view>
                            <view class="" v-if="list.length==0">
                                <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
                            </view>
                        </block>
                        
                </view>
        </view>
      
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                cateList:[],
				list: [],
                current:0,
                topCurrent:1
				
			}
		},
		
		onReady() {
			
		},
        onLoad() {
            this.actCate()
            // this.venueCate()
            
        },
		methods: {
            
            async actCate(){
              const {data,code}  =     await this.$api.CategoryList()
              console.log(code,data)
              if(code==200){
                  this.cateList = data
                  this.getactList()
              }
            },
            async getactList(){
                let id = this.cateList[this.current].id
              const {data,code}  =     await this.$api.activityList({categoryId:id})
              console.log(code,data)
              if(code==200){
                  this.list = data
              }
            },
            async venueCate(){
              const {data,code}  =     await this.$api.venueCateList()
              console.log(code,data)
              if(code==200){
                  this.cateList = data
                  
              }
            },
            async getList(){
                // let id = this.cateList[this.current].id
              const {data,code}  =     await this.$api.allVenueList()
              console.log(code,data)
              if(code==200){
                  this.list = data
              }
            },
            change(index){
                this.current = index
                if(this.topCurrent==0){
                    this.getList()
                }else{
                    this.getactList()
                }
                
            },
            call(){
                uni.makePhoneCall({
                    phoneNumber:''
                })
            },
            toMain(item){
                    uni.navigateTo({
                        url:'/pages/chooseSession/index?id='+item.id
                    })
            },
            toDetail(item){
                uni.navigateTo({
                    url:'/pages/addressMain/index?id='+item.id
                })
            },
            toDetails(item){
                uni.navigateTo({
                    url:'/pages/actMain/index?id='+item.id
                })
            },
            changeTopCurrent(type){
                this.topCurrent = type
                this.current=0
                if(type==0){
                    this.getList()
                    // this.venueCate()
                }else{
                    this.actCate()
                }
            }
		}
	}
</script>
<style scoped lang="scss">
                
            .header{
                image{
                    width: 100%;
                    height: 300rpx;
                }
            }
                
            .cateItem{
                font-weight: 500;
                font-size: 24rpx;
                color: #3D3D3D;
                border: 2rpx solid #D3D3D3;
                padding: 16rpx  56rpx;
                border-radius: 86rpx;
                margin-right: 24rpx;
            }
                
            .active{
                border: 2rpx solid #2CC6A1;
                color: #2CC6A1;
            }
        .artItem {
            font-size: 24rpx;
            color: #9F9F9F;
            padding-bottom: 44rpx;
            box-sizing: border-box;
            border-bottom: 2rpx solid #eee;
            padding-top: 20rpx;
            image{
                width: 270rpx;
                height: 202rpx;
                border-radius: 12rpx ;
                margin-right: 32rpx;
            }
            .right{
                width: 120rpx;
                height: 54rpx;
                background: rgba(0,199,119,0.2);
                border-radius: 60rpx ;
                font-size: 28rpx;
                color: #2CC6A1;
                text-align: center;
                line-height: 54rpx;
                margin-top: 52rpx;
            }
            .name{
                font-size: 32rpx;
                color: #3D3D3D;
                margin-bottom: 8rpx;
            }
        }
        .topTab{
            font-size: 32rpx;
            color: #666666;
            line-height: 54rpx;
            view{
                margin-right: 62rpx;
            }
        }
            
        .topActive{
            font-weight: 600;
            font-size: 32rpx;
            color: #000000;
        }
        .item-price {
        	font-size: 24rpx;
        	color: #FF9012;
        	text {
        		font-size: 36rpx;
                line-height: 36rpx;
        	}
        }
</style>